<script setup>
	import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
	import {
		ref
	} from 'vue'

	const handleRightIcon = () => {
		uni.switchTab({
			url: '/pages/work/index',
		})
	}

	const title = ref('添加评论')
	const txt = ref('')
</script>

<template>
	<view class="auditAddComment">
		<HeaderNavTabarVue :iconFont="'icon-cuowuguanbiquxiao'" :title="title" @rightIcon="handleRightIcon" />
		<view class="comment-box">
			<textarea v-model="txt" class="textarea" placeholder="评论全文"></textarea>

			<view class="setting">
				<view class="setting-image">
					<image src="@/static/icon/auditDetailsSVG/image.svg"></image>
					<text>图片</text>
				</view>
				<view class="setting-folder">
					<image src="@/static/icon/auditDetailsSVG/folder.svg"></image>
					<text>附件</text>
				</view>
			</view>
		</view>
		<button class="btn" :class="{ activeBtn: txt.length>0 }">发送</button>
	</view>
</template>

<style lang="scss" scoped>
	@import '@/static/style/index.scss';

	.auditAddComment {
		background-color: #f7f8fa;
		padding-top: 40rpx;

		.comment-box {
			padding: 32rpx;
			background-color: #fff;

			.textarea {
				border: 2rpx solid #e5e6eb;
				width: 100%;
				border-radius: 16rpx;
				padding: 24rpx;
			}

			.setting {
				display: flex;
				align-items: center;
				margin-top: 16rpx;

				.setting-image,
				.setting-folder {
					color: #86909c;
					display: flex;
					align-items: center;
					margin-right: 24rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

					text {
						font-size: 32rpx;
					}
				}
			}
		}

		.btn {
			margin-top: 63rpx;
			width: 686rpx;
			padding: 23rpx 32rpx;
			@include flex(center, center);
			border-radius: 8rpx;
			height: 88rpx;
			background: #c9cdd4;
			color: #ffffff;
			font-size: 30rpx;
			font-weight: 400;

			&:after {
				border: none;
			}
		}

		.activeBtn {
			background: #165DFF;
		}
	}
</style>